:root {
  color-scheme: light dark;
  --brand: rgba(250, 15, 117);
  accent-color: var(--brand);
}

.accent-color-ss {
  form {
    fieldset {
      border: 1px solid var(--brand);
      display: flex;
      flex-direction: column;
      label {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  legend {
    color: var(--brand);
  }
}

/**
用于检测用户是否有将系统的主题色设置为亮色或者暗色
不会改变主题式是否应用，只是在确认应用主题后，改变主题的 css

no-preference: 表示系统未得知用户在这方面的选项；
light|dark: 表示用户已告知系统他们选择使用浅色主题或深色的界面；
“未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认
“已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。
*/
@media (prefers-color-scheme: dark) {
  :root {
    --brand: rgba(3, 169, 244, 1);
  }
}
